<template>
	<div class="container">
		<navigationBar leftTitle="我买到的"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight) + 'px;'">
			<div class="row">
				<div class="search">
					<image class="search-icon" src="/static/icon/search.png" mode=""></image>
					<input type="text" v-model="keyword" @confirm="confirm" @keydown.enter="confirm"
						placeholder="请输入需要搜索的内容" />
				</div>
				<div class="btn" @click="confirm">搜索</div>
			</div>
			<div class="nav-wrap">
				<div class="nav-tab">
					<div v-for="(item,index) in orderTypeList" :key="index"
						:class="['nav-item',current == index?'active':'']"
						@click="handlerChangeOrderType(index,item.value)">{{item.label}}</div>
				</div>
			</div>
			<div class="buy" v-for="(item,index) in list" :key="index">
				<div class="user">
					<div class="user-left">
						<image :src="item.merchantAvatar" mode="aspectFill"></image>
						<span>{{item.merchantNickname}}</span>
					</div>
					<div class="user-right">
						{{getStatusStr(item.orderStatus)}}
					</div>
				</div>
				<div class="buy-wrap">
					<div class="buy-left" @click="toOrderDetail(item.id)">
						<image class="buy-pic"
							v-if="item.firstFileSuffix !== 'png' && item.firstFileSuffix !== 'jpg' && item.firstFileSuffix !== 'jpge'"
							:src="item.firstCoverPath" mode="aspectFill"></image>
						<image class="buy-pic" v-else :src="item.firstPicturePath" mode="aspectFill"></image>
						<div class="pri-wrap">
							<div class="pri-title">{{item.title}}</div>
							<div class="pri-box">
								<span class="price"><span
										class="price-icon">￥</span>{{item.productPrice || item.price}}</span>
								<span v-if="item.freeShipping" class="attr">包邮</span>
							</div>
						</div>
					</div>
					<div class="buy-right">
						<div class="buy-btn" @click="$navSkin.toUserChat(item.merchantUserId,item.merchantNickname)">
							联系商家</div>
						<div class="buy-want" v-if="item.orderStatus == 1" @click="wechatPay(item.id)">付款</div>
						<div class="buy-want" v-if="item.orderStatus == 4" @click="toEvaluate(item.id)">评价</div>
						<div class="buy-want" v-if="item.orderStatus == 3" @click="confirmReceive(item.id)">收货</div>
					</div>

				</div>
			</div>
			<!-- <div class="more">没有更多了～</div> -->
			<!-- <div class="empty" v-show="false">
				<image class="empty-img" src="../../static/icon/icon_wu.png" mode=""></image>
				<div class="title">暂无内容！</div>
			</div> -->
		</div>
	</div>
</template>

<script>
	import data from '@/js/my/myOrder/data.js';
	import methods from '@/js/my/myOrder/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	export default {
		data,
		methods,
		onLoad(e) {

		},
		onShow() {
			this.list = []
			this.getPageList()

		},
		onReachBottom() {
			this.getPageList()
		},
		onHide() {
			console.log('on hide')
		},
		onUnload() {},
		computed: {
			...mapState(['navigationBarHeight', 'statusBarHeight', 'userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			navigationBar,
		}
	};
</script>
<style>
	page,
	uni-page {
		background-color: rgb(255, 255, 255) !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/myOrder.scss';
</style>